import React,{useState,useEffect,memo} from 'react';
import Header from '../../components/main/header/Header';
import Scroll from '../../baseUI/scroll'
import Swipers from '../../components/main/swipers/Swipers'
import MenuBar from '../../components/main/menuBar/menuBar';
import FrameLayout from '../../components/main/frameLayout/FrameLayout'
import Recommend from '../../components/main/recomend/Recommend';

import '../../assets/icon/iconfont.css'
import './main.css'
import {Toast } from 'antd-mobile'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
const Main = (props) => {
    const {mainData} = props
    // console.log('这是porps的数据',props);
    const [display, setDisplay] = useState(false)
    const { getMainDataDispatch } = props
     const {swiperImg = [],menuBarData = [],layout = [],recommend = []} = mainData
    // console.log('main mainData',mainData);
    // popup组件的显示状态
    const handleOnclick = () => {
        setShowPopup(!showPopup)
    }
    // 上拉加载更多
    const handlePullUp = () => {
        console.log('上拉');
        // Toast.show({
        //     icon: 'loading',
        //     content: '加载中…',
        // })
    }
    // 下拉刷新
    const handlePullDown = () => {

    } 

    useEffect(() => {
        if(!mainData.length) {
            Toast.show({
                icon: 'loading',
                content: '加载中…',
                duration:0
            })
            getMainDataDispatch()
            // console.log;
        }
        // console.log('useEffect');  
    }, []);
    return (
        <div className='main'>
             <Header></Header>
            <Scroll
                  direction={"vertical"}
                  refresh={false}
                  pullUp={handlePullUp}
                  pullDown={handlePullDown}
                  onScroll={
                      (e) => {
                          if (e.y < -1142) {
                              setDisplay(true)
                          } else {
                              setDisplay(false)
                          }
                      }
                  }
            >
                <div className="main-padding">
                    {/* 轮播图 */}
                <Swipers swiperImg={swiperImg}></Swipers>
                {/* 第二个轮播图 */}
                  <MenuBar menuBarData = {menuBarData}></MenuBar>
                  {/*  */}
                  <FrameLayout layout={layout}></FrameLayout>
                  <div className="sparate-line">
                      <i className='iconfont icon-youjiantou'></i>
                      <i className='iconfont icon-aixin'></i>
                      <span>你可能还喜欢</span>
                      <i className='iconfont icon-zuojiantou'></i>
                  </div>
                  {/* 推荐 */}
                <Recommend recommend={recommend}></Recommend>
                
                </div>
            </Scroll>
                {/* <TabbleBar></TabbleBar> */}
        </div>
    )
}

const mapStateToProps = (state)=>{
    //拿store里面的数据
    // 这个函数一定有一个参数state
    // console.log('state',state.main.mainData);
    return {
        mainData: state.main.mainData
    }
}

const mapStateToDispatch = (dispatch)=>{
    // 创建action，把数据dispatch去store里面
    // console.log('mapStateToDispatch');
    return{
        getMainDataDispatch() {
            Toast.clear()
            dispatch(actionTypes.getData())
        }
    }
}

export default connect(mapStateToProps,mapStateToDispatch)(memo(Main))